<template>
    <z-paging ref="paging" v-model="shopList" @query="queryList">
        <u-sticky>
            <view class="heqader_box">
                <hedsty :headCentext="'我的订单'"></hedsty>
                <view class="tabs_box">
                    <view class="dange_xuanze_tab_vbox" :class="tabsId == item.id ? 'dange_xuanze_tab_vbox1' : ''"
                        v-for="(item, index) in tabsList" :key="index" @click="tabsBtn(item)">{{ item.text }}
                    </view>
                </view>
            </view>
        </u-sticky>
        <view class="list_box" v-for="(item, index) in shopList" :key="index" @click="goOrderDetail(item)"
            style="background-image: url('https://morgan.dingxians.cn/static/copup/3.png')">
            <view class="zongjiage_box">
                <view class="left_txt_box">总计：¥{{ item.total_amount }}</view>
                <view class="right_txt_box">共{{ item.total_num }}件</view>
            </view>
            <view class="zonghezi_box">
                <view class="dange_ssss_box" v-for="(items, indexs) in item.order_detail" :key="indexs">
                    <view class="dangeshangpin_box">
                        <image :src="items.goods_image" mode="scaleToFill" />
                    </view>
                    <view class="price_bvoix">价值:{{ (items.goods_price * 1).toFixed(2) }}</view>
                </view>
            </view>

        </view>
    </z-paging>
</template>
<script>
import hedsty from '../../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            tabsList: [
                {
                    id: 0,
                    text: '全部'
                },
                {
                    id: 1,
                    text: '待付款'
                },
                {
                    id: 2,
                    text: '待提货'
                },
                {
                    id: 3,
                    text: '已提货'
                },
                {
                    id: 4,
                    text: '已完成'
                },
                {
                    id: 5,
                    text: '已取消'
                }
            ],
            tabsId: 0,
            shopList: [],
        }
    },
    onLoad(e) {
        this.tabsId = e.status
    },
    onShow() {

    },
    methods: {
        tabsBtn(item) {
            this.tabsId = item.id
            this.$refs.paging.reload()
        },
        queryList(pageNo, pageSize) {
            let data = {
                page: pageNo,
                limit: pageSize,
                status: this.tabsId
            }
            this.$Request.get(this.$api.shop.orders, data).then(res => {
                if (res.code == 200) {
                    this.$refs.paging.complete(res.data.data)
                }
            })
        },
        goOrderDetail(item) {
            this.$router('/userPage/order/orderDetail?status=' + item.status + '&status_str=' + item.status_str + '&id=' + item.id)
        }
    }
}
</script>
<style lang="scss" scoped>
.tabs_box {
    width: 100%;
    height: 50rpx;
    box-sizing: border-box;
    padding-left: 30rpx;
    display: flex;
    justify-content: flex-start;
    margin-top: 32rpx;
    overflow: hidden;
    overflow-x: auto;

    .dange_xuanze_tab_vbox {
        padding: 0 28rpx;
        height: 50rpx;
        text-align: center;
        line-height: 50rpx;
        margin-right: 30rpx;
        background: rgba(255, 255, 255, .5);
        border-radius: 25rpx;
        color: #ccc;
        font-size: 28rpx;
        flex-shrink: 0;

        &.dange_xuanze_tab_vbox1 {
            color: #FF4545;
            background: #501414;

        }
    }


}

.list_box {
    margin: auto;
    margin-bottom: 30rpx;
    width: 690rpx;
    height: 390rpx;
    background-size: 100% 100%;
    padding: 35rpx 28rpx;
    box-sizing: border-box;

    .zongjiage_box {
        width: 100%;
        height: 80rpx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10rpx;

        .left_txt_box {
            height: 80rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #FFFFFF;
            line-height: 80rpx;
        }

        .right_txt_box {
            height: 80rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #FFFFFF;
            line-height: 80rpx;
        }
    }

    .zonghezi_box {

        width: 100%;
        height: 230rpx;
        margin-bottom: 30rpx;
        // flex-wrap: wrap;
        overflow: hidden;
        overflow-x: auto;
        display: flex;
        justify-content: flex-start;

        .dange_ssss_box {
            width: 180rpx;
            margin-right: 10rpx;

            .dangeshangpin_box {
                width: 180rpx;
                height: 180rpx;
                background-color: rgba(23, 1, 3, 1);
                display: flex;
                justify-content: center;
                align-items: center;
                flex-shrink: 0;
                // margin-bottom: 20rpx;
                border-radius: 10rpx;

                image {
                    width: 150rpx;
                    height: 150rpx;
                }
            }

            .price_bvoix {
                width: 100%;
                height: 50rpx;
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 50rpx;
                text-align: center;
            }
        }

    }

}
</style>